<template>
    <div class="container">
        <div ref="chartDom" class="chart-wrapper" style="width: 1200px; height:800px ;" margin: auto>

        </div>

    </div>
</template>

<script>
import * as echarts from 'echarts';
import axios from 'axios';
export default {
    name: 'TreeChart',
    data() {
        return {
            chart: null,
        };
    },
    mounted() {
        this.chart = echarts.init(this.$refs.chartDom);
        this.fetchChart();
        // this.drawChart();
    },
    methods: {
        async fetchChart() {
            try {
                const response = await axios.get('/api/users/feedback/type');
                if (!response.status == 200) {
                    throw new Error('Network response was not ok');
                }
                console.log('类比:', response.data.data);
                this.treepicture = response.data.data;

                // 假设后端返回的是 { "status": 200, "online_user_count": 523 }  
                // 但我们依然检查 data.status 和 data.online_user_count 来确保数据的有效性  
                if (response.status === 200) {
                    // 如果有需要，现在可以调用画图方法  
                    this.drawChart(response.data.data);
                } else {
                    console.error('Invalid response data:', response);
                }
            } catch (error) {
                console.error('Error fetching online count:', error);
                // 在这里处理错误，比如显示一个错误消息  
            }
        },
        drawChart(treepicture) {
            const root = treepicture.map(item => ({
                name: item.type, // 使用问题类型作为节点名称  
                value: item.count // 使用问题数量作为节点值  
            }));  
            const option = {
                series: [
                    {
                        type: 'treemap',
                        data: root // 使用转换后的树形数据  
                    }
                ]
            };  
            this.chart.setOption(option);
        },
    },
    beforeDestroy() {
        if (this.chart) {
            this.chart.dispose(); // 在组件销毁前，清理图表实例  
        }
    },
};  
</script>
<style scoped>
.container {
    display: flex;
    flex-direction: column;
    /* 设置为列方向，使得卡片堆叠 */
    height: 100%;
    /* 假设您希望这个容器占据整个视口高度 */
}

.chart-wrapper {
    width: 80%;
    margin: auto;
}

</style>